<template>
  <!--系统管理--区域管理-->
  <div class="content-area area-manage">
    <!-- 位置模块 -->
    <HeadTop></HeadTop>
    <div class="search-area">
      <div class="search-content">
        <areaSelect v-on:getAreaArr="getAreaArr" v-on:getNowAreaPosition="getArea" :areaText="areaText"></areaSelect>
      </div>
      <div class="search-footer">
        <button class="search-btn" @click="searchAreaManage">查询</button>
      </div>
    </div>
    <!--内容-->
    <div class="main-content">
      <div class="content-info">

        <!-- 表格数据与翻页合并模块 -->
        <DataTable :childLoad="parentLoad" :dataTableObj="dataTableObj" v-on:getPageNo="searchByPageNo" v-on:handlePageReload="pageReload"
                   v-on:getPageSize="searchByPageSize">
          <!--除查询外的操作-->
          <div slot="operate">
            <div class="some-operate">
              <button class="some-btn some-btn-add" @click="addArea">添加区域</button>
            </div>
          </div>
          <!-- 额外的操作以及其他因素 -->
          <div>
            <el-table-column fixed="right" align="center" label="操作" width="300">
              <template slot-scope="scope">
                <el-button class="disable-button" v-if="scope.row.isSystem == '1' " disabled>无法编辑</el-button>
                <el-button class="edit-button " v-else @click="editAreaName(scope.row)">编辑</el-button>
              </template>
            </el-table-column>
          </div>

        </DataTable>
      </div>
    </div>


    <el-dialog title="编辑" :visible.sync="dialogVisible">
      <div class="add-area-input">
        <div class="edit-input"><span>地区简称:</span>
          <el-input placeholder="请输入内容" v-model="changeArea.shortname" clearable></el-input>
        </div>
      </div>

      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="changeAreaName()">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog :visible.sync="addAreaDialogVisible">

      <div class="add-area">
        <div class="add-area-header">
          <el-button @click="addAreaInput">添加区域</el-button>
        </div>
        <div class="add-area-content">
          <div class="add-area-input" v-for="item in dialogAddAreaArr">

            <div class="item">
              <span>区域名称:</span>
              <el-input placeholder="请输入区域简称" v-model="item.shortname"></el-input>
            </div>
            <div class="item">
              <span>区域编码:</span>
              <el-input placeholder="请输入区域名称" v-model="item.id"></el-input>
            </div>
          </div>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addAreaDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addChildAreaMsg()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
  // 表格数据
  import DataTable from "../../../components/dataTable/dataTable"
  import areaSelect from "../../../components/areaSelect/areaSelect"
  import com from "../../../js/common"
  import HeadTop from "../../../components/head-top/head-top"
  import {getAreaPage, addArea, updateAreaMsg} from '@/api/getData'
  export default {
    name: 'areaManage',
    components: {
      DataTable,
      areaSelect,
      HeadTop
    },
    data() {
      return {
        parentLoad: '加载中...',    // 加载状态
        // 搜索区域数据
        searchData: {
          parentid: null,
          level: 1
        },
        // 表格组件数据
        dataTableObj: {
          // 表格数据
          tableData: [],
          // 表格标题
          tableColumns:
            [
              {
                text: '序号',
                width: '60',
                attributeName: 'index'
              },
              {
                text: '地区名称',
                width: '80',
                attributeName: 'areaname'
              },
              {
                text: '地区简称',
                width: '80',
                attributeName: 'shortname'
              },
              {
                text: '地区编号',
                width: '80',
                attributeName: 'id'
              },
              {
                text: '级别',
                width: '80',
                attributeName: 'level'
              }
            ],

          // 翻页所需数据
          pageObj: {
            // 每页分为几条数据
            pageSize: 10,
            // 总共多少数据
            pageNum: 0,
            // 当前页
            pageNo: 1,
            searchStatus: 2,
          },
        },
        changeArea: {
          areaname: '',
          id: '',
          level: 0,
          parentid: '',
          shortname: ''
        },
        // 区域选择
        areaText: '区域选择:',

        dialogVisible: false,
        // 添加区域选择
        addAreaDialogVisible: false,
        dialogAddAreaArr: [],
        searchAddress: '',
      }
    },

    mounted() {
      // 获取当前页面所需数据
      this.geAreaManageData()
    },

    methods: {
      // 获取页面所需数据
      geAreaManageData() {

        this.dataTableObj.pageObj.searchStatus = 2
        this.dataTableObj.tableData = []
        let self = this;
        getAreaPage({
          pageNo: self.dataTableObj.pageObj.pageNo,
          pageSize: self.dataTableObj.pageObj.pageSize,
          condition: self.searchData
        }).then(function (data) {

          self.dataTableObj.pageObj.searchStatus = 1
          let info = data.data.data
          let infoList = info.data
          let infoArr = []
          if (infoList.length > 0) {
            infoList.forEach((i, t) => {
              i.index = (t + 1) + self.dataTableObj.pageObj.pageSize * (self.dataTableObj.pageObj.pageNo - 1)
              infoArr.push(i)
            })
          } else {
            self.parentLoad = '暂无数据'    // loading(暂无数据)
          }
          self.dataTableObj.tableData = infoArr
          self.dataTableObj.pageObj.pageNum = info.totalRecord
        }).catch(function (data) {
          self.$message.error(data.data.message)
          self.parentLoad = data.data.message    // loading(查询失败)
          self.dataTableObj.pageObj.searchStatus = 0
        })
      },

      searchAreaManage: function () {
        // 跳出查询等待框
        this.geAreaManageData();
      },
      // 每页多少内容
      searchByPageSize(val) {
        this.dataTableObj.pageObj.pageSize = val;
        this.geAreaManageData();
      },
      // 获取查询区域code
      getArea(res) {
        this.searchData.parentid = res.code
        this.searchData.level = res.level + 1
      },
      // 获取查询区域详细地址
      getAreaArr(res) {
        this.searchAddress = res.reduce((pos, value) => {
          return pos + value.label
        }, '')
      },
      // 切换第几页
      searchByPageNo(val) {
        // 切换每页数目
        this.dataTableObj.pageObj.pageNo = val;
        this.geAreaManageData();
      },


      // 编辑区域名称
      editAreaName(row) {

        this.changeArea.areaname = row.areaname
        this.changeArea.shortid = row.id.substr(row.id.length - 3)
        this.changeArea.parentid = row.parentid
        this.changeArea.shortname = row.shortname
        this.changeArea.level = row.level

        this.dialogVisible = true
      },
      changeAreaName() {
        let obj = this.changeArea
        obj.id = obj.parentid + obj.shortid
        updateAreaMsg(obj).then((res) => {
          com.mask()
          this.$message.success({
            message: '修改成功',
            duration: 1500,
            onClose: () => {
              com.unmask()
              this.dialogVisible = false
            }
          })
        }).catch((err) => {
          this.$message.error(err.data.message)
        })
      },
      // 添加区域显示弹窗
      addArea() {
        if (this.searchData.level < 4) {
          this.$message.warning('当前区域无法添加子区域')
        } else {

          this.addAreaDialogVisible = true
        }
      },
      // 添加区域input
      addAreaInput() {
        let obj = {
          id: '',
          shortname: '',
        }
        obj.level = this.searchData.level
        // 父区域名称
        obj.areaname = this.searchAddress
        this.dialogAddAreaArr.push(obj)

      },
      // 添加区域信息
      addChildAreaMsg() {
        let param = {}
        param.pid = this.searchData.parentid
        param.list = []
        for (let i = 0; i < this.dialogAddAreaArr.length; ++i) {
          param.list.push(this.dialogAddAreaArr[i])
        }
        param.list.map((v) => {
          v.id = param.pid + v.id
          v.areaname = v.areaname + v.shortname
        })
        addArea(param).then((res) => {
          com.mask()
          this.$message.success({
            message: '添加成功',
            duration: 1500,
            onClose: () => {
              com.mask()
              this.addAreaDialogVisible = false
            }
          })
        }).catch((err) => {
          this.$message.error(err.data.message)
        })
      },

      // 页面刷新
      pageReload(){
        this.geAreaManageData();
      }

    }

  }
</script>

<style lang="scss" type="text/scss">
  @import "../../../style/entry/components/pageCommon";
  .area-manage {
    .el-dialog__body {
      padding-top: 10px;
    }

    .edit-input {
      display: flex;
      line-height: 30px;
      font-size: 16px;
      .el-input {
        width: 200px;
        height: 30px;
        .el-input__inner {
          line-height: 30px;
          height: 30px;
        }
      }
    }
    .add-area {
      .add-area-header {
        flex-direction: row-reverse;
        display: flex;
        button {
          height: 30px;
          line-height: 30px;
          display: flex;
          justify-content: center;
          align-items: center;
          padding: 0;
          width: 6em;
        }
      }
      .add-area-content {
        .add-area-input {
          display: flex;
          justify-content: space-around;
          margin-top: 20px;
          .item {
            display: flex;
            width: 40%;
            span {
              flex-shrink: 0;
            }
          }
        }
      }
    }
    .edit-button {
      width: 50px;
      height: 26px;
      border-radius: 2px;
      background: #e7843b;
      text-align: center;
      padding: 0;
      line-height: 26px;
      font-size: 12px;
      color: #fff;
    }
    .disable-button {
      width: 70px;
      height: 26px;
      border-radius: 2px;
      text-align: center;
      padding: 0;
      line-height: 26px;
      font-size: 12px;
    }
  }

</style>
